<template>
<div class="my-card">
    <el-row class="toolbar">
      <DatePicker
        :options="options"
        :getData="getData"
      >
      </DatePicker>
      <img class="my-btn"
          v-if="showValue"
          style="width:25px;height:25px"
          src="../../assets/icons/line.png"
          @click="changeToTable">
      <img class="my-btn"
          v-else style="width:35px;height:35px"
          src="../../assets/icons/table.png"
          @click="changeToLine">
      <el-button 
        type="primary" 
        v-if="!showValue"
        @click="exportExcel">
        导出
      </el-button>
    </el-row>
    <el-container v-show="showValue">
      <div id="bar" ref="b" style="width:600px; height:400px;"></div>
       
    </el-container>
      <el-container  v-show="!showValue">
        <el-table
            :data="historyTableData"
            style="width: 80%;display:flex;flex-direction:column;">
            <el-table-column
                prop="date"
                label="时间"
                width="150">
            </el-table-column>
            <el-table-column
                v-for="item in historyTableData"
                :label="item.name"
                :key="item.id">
                <el-table-column
                    v-for="item1 in item.waterPumpsInfo"
                    :label="item1.name"
                    :key="item1.id"
                    width="120">
                    <template slot-scope="scope">
                      <span>{{item1.openStatusHistory[0].isOpen?1:0}}</span>
                    </template>
                </el-table-column>
            </el-table-column>
        </el-table>
    </el-container>
</div>
  
</template>
<script>
import echarts from 'echarts/lib/echarts'
let lineChart = null

import moment from 'moment'
import DatePicker from '../../components/DatePicker.vue'
import formRequest from './formRequest.js'
import axios from 'axios'

export default {
  components: {
    DatePicker,
    echarts
  },
  data() {
    return {
      historyTableData: [],
      lineOption: {},
      showValue: true,
      options: [
        {
          text: '最近一天',
          range: [moment().subtract(1, 'D').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]
        }, {
          text: '最近一月',
          range: [moment().subtract(1, 'M').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]
        }, {
          text: '最近一年',
          range: [moment().subtract(1, 'y').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]
      }],
    }
  },
  mounted() {
    let range = [moment().subtract(1, 'D').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]
    // 初始化获取数据
    this.getWaterPumpsHistoryData();
    this.getData(range);
    lineChart = echarts.init(this.$refs.b);
                    
    const lineOption = {
       title : {
        text: '三坪水厂水泵开停历史状态',
        // subtext: '纯属虚构'
    },
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        },
        formatter: function (params) {
            var tar;
            if (params[1].value != '-') {
                tar = params[1];
            }
            else {
                tar = params[0];
            }
            return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
        }
    },
    xAxis : [
        {
            type : 'category',
            splitLine: {show:false},
            data :  function (){
                var list = [];
                for (var i = 1; i <= 11; i++) {
                    list.push('11月' + i + '日');
                }
                return list;
            }()
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'收入',
            type:'bar',
            stack: '总量',
            itemStyle : { normal: {label : {show: true, position: 'top'}}},
            data:[900, 345, 393, 108, 154, 135, 178, 286, 119, 361, 203]
        },
          {
            name:'辅助',
            type:'bar',
            stack: '总量',
            itemStyle:{
                normal:{
                    barBorderColor:'rgba(0,0,0,0)',
                    color:'rgba(0,0,0,0)'
                },
                emphasis:{
                    barBorderColor:'rgba(0,0,0,0)',
                    color:'rgba(0,0,0,0)'
                }
            },
            data:[0, 900, 1245, 1530, 1376, 1376, 1511, 1689, 1856, 1495, 1292]
        },
    ]
};
                    ;
    if (lineOption && typeof lineOption === 'object') {
      lineChart.setOption(lineOption, true)
    }
  },
  methods: {
    //改变图标类型
    changeToTable () {
      this.showValue = false
    },
    changeToLine () {
      this.showValue = true
    },
    //初始化日期组件
    getData(range) {
      // //获取对应日期的数据  /dispatch/dispatchOrder/waterpumps/openStatus/historyData
      // axios.get('http://132.232.162.213:8090/dispatch/dispatchOrder/waterpumps/openStatus/historyData', {
      //   params: {
      //     valveId: 12345,
      //     startTime: range[0],
      //     endTime: range[1]
      //   }
      // }).then((resp) => {
      //   console.log(resp)
      // }).catch(() => {
      //   console.log('err')
      // })
    },
    //导出表格
    exportExcel () {
      const end = new Date().getTime()
      const start = end - 3600 * 1000 * 24 * 1
      let params = {
        startTime: start,
        endTime: end
      }
      // const url = '/dispatch/dispatchOrder/waterpumps/openStatus/historyData';
      // formRequest(url, params)
    },
    //获取数据
    getWaterPumpsHistoryData () {
      let options = {
        color: ['#c23531', '#2f4554', '#61a0a8', '#d48265'],
        name: ['实测流量', '预测流量', '绝对误差', '相对误差']
      }
    //   let params = {
    //     startTime: this.dateRange[0],
    //     endTime: this.dateRange[1]
    //   }
    //   this.getWaterPumpsHistoryDataByParams(params)
      let data = [
        {
          id: 12345,
          name: '三坪水厂',
          waterPumpsInfo: [
            {
              id: 12365,
              name: '1#',
              openStatusHistory: [
                {
                  isOpen: true,
                  time: '2018/10/1'
                },
                {
                  isOpen: true,
                  time: '2018/10/2'
                }
              ]
            },
            {
              id: 12367,
              name: '2#',
              openStatusHistory: [
                {
                  isOpen: true,
                  time: '2018/10/1'
                },
                {
                  isOpen: false,
                  time: '2018/10/2'
                }
              ]
            }]
        },
        {
          id: 1234544,
          name: '三坪水厂2',
          waterPumpsInfo: [
            {
              id: 12365,
              name: '1#',
              openStatusHistory: [
                {
                  isOpen: true,
                  time: '2018/10/1'
                },
                {
                  isOpen: true,
                  time: '2018/10/2'
                }
              ]
            },
            {
              id: 12367,
              name: '2#',
              openStatusHistory: [
                {
                  isOpen: true,
                  time: '2018/10/1'
                },
                {
                  isOpen: false,
                  time: '2018/10/2'
                }
              ]
            }]
        }
      ]
      this.historyTableData = data
    },
  },
}
</script>
<style lang="css" scoped>
.my-card{
  width: 100%;
  background-color: #fff;
  padding: 15px;
  margin: 10px;
  height: 800px;
  }
  .el-container {
    width:56%
  }

  .chartBox{
    height: 350px;
    width: 100%;
  }
</style>